<template>
		<div class="zp">
			<div class="nav">
				<div :class="navcolor[0]" @click='navcolorchange(0)'>湘南院区</div>
				<div :class="navcolor[1]" @click='navcolorchange(1)'>东院</div>
				<div :class="navcolor[2]" @click='navcolorchange(2)'>北院</div>
			</div>
			<div class="form">
				<div>
					<div :class="navleft[index]" v-for="(item,index) of list" :key="index" @click='navchange(index)'>{{item}}</div>
				</div>
				<div>
					<div class="navleftp" v-for="(item,index) of navnowlish" @click='yuyue'>{{item}}</div>
				</div>
			</div>
		</div>
</template>

<script>
		export default{
			data(){
				return{
					navcolor:['navtext1','navtext','navtext','navleft','navleft','navleft','navleft','navleft','navleft','navleft','navleft','navleft','navleft','navleft'],
					navleft:['navleft1','navleft','navleft','navleft','navleft','navleft','navleft','navleft','navleft','navleft','navleft','navleft','navleft','navleft'],
					list:['外科','儿科','神经内科','耳鼻喉科','耳鼻喉科','眼科门诊','皮肤科','心理科','营养科','全科门诊','麻醉科','康复中心','疼痛科','心理科'],
					navright:[['呼吸内科','呼吸内科','呼吸内科','呼吸内科','呼吸内科'],['肝胆脾外科','肝胆脾外科','肝胆脾外科','肝胆脾外科','肝胆脾外科'],['呼吸内科','呼吸内科','呼吸内科','呼吸内科','呼吸内科'],['肝胆脾外科','肝胆脾外科','肝胆脾外科','肝胆脾外科','肝胆脾外科'],['呼吸内科','呼吸内科','呼吸内科','呼吸内科','呼吸内科'],['肝胆脾外科','肝胆脾外科','肝胆脾外科','肝胆脾外科','肝胆脾外科'],['呼吸内科','呼吸内科','呼吸内科','呼吸内科','呼吸内科'],['肝胆脾外科','肝胆脾外科','肝胆脾外科','肝胆脾外科','肝胆脾外科'],['呼吸内科','呼吸内科','呼吸内科','呼吸内科','呼吸内科'],['肝胆脾外科','肝胆脾外科','肝胆脾外科','肝胆脾外科','肝胆脾外科'],['呼吸内科','呼吸内科','呼吸内科','呼吸内科','呼吸内科'],['肝胆脾外科','肝胆脾外科','肝胆脾外科','肝胆脾外科','肝胆脾外科'],['呼吸内科','呼吸内科','呼吸内科','呼吸内科','呼吸内科'],['肝胆脾外科','肝胆脾外科','肝胆脾外科','肝胆脾外科','肝胆脾外科']],
					navnowlish:[]
				}
			},methods:{
				yuyue(){
					uni.navigateTo({
						url:'./chooseroom'
					})
				},
				navcolorchange(val){
					
						this.navcolor=['navtext','navtext','navtext']
						this.navcolor[val]='navtext1'
						this.navleft=['navleft','navleft','navleft','navleft','navleft','navleft','navleft','navleft','navleft','navleft','navleft','navleft','navleft','navleft']
						this.navleft[0]='navleft1'
						this.navnowlish=this.navright[0]
					
				},navchange(index){
					this.navleft=['navleft','navleft','navleft','navleft','navleft','navleft','navleft','navleft','navleft','navleft','navleft','navleft','navleft','navleft']
					this.navleft[index]='navleft1'
					this.navnowlish=this.navright[index]
				}
			},onShow() {
				this.navnowlish=this.navright[0]
			}
		}
</script>

<style>
	.navleftp:active{
		color: skyblue;
	}
	.navleftp{
		font-family: 'PingFangSC-Light', 'PingFang SC Light', 'PingFang SC', sans-serif;
		    font-weight: 200;
		    font-style: normal;
		    font-size: 13px;
		    text-align: left;
		    line-height: 20px;
					line-height: 50px;
					margin-left: 20px;
	}
	.navleft1{
		line-height: 50px;
		padding-left: 25px;
		background-color: #ffffff;
	}
	.navleft{
		line-height: 50px;
		padding-left: 25px;
		background-color: #f6f6f7;
	}
	.form{
		display: flex;
	}
	.form>div:nth-child(1) {
		flex: 40%;
	}
	.form>div:nth-child(2){
		flex: 60%;
	}
	.nav{
		display: flex;
		padding: 10px 50px;
	}
	.navtext1{
		flex: 1;
		text-align: center;
		border: 1px solid #f2f2f2;
		font-size: 12px;
		padding: 3px 0;
		font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
		    font-weight: 400;
		    font-style: normal;
		    font-size: 12px;
		    line-height: 20px;
			    color: #ffffff;
				background-color: #006eff;
				border-radius: 5px;
	}
	.navtext{
		flex: 1;
		text-align: center;
		border: 1px solid #f2f2f2;
		font-size: 12px;
		padding: 3px 0;
		font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
		    font-weight: 400;
		    font-style: normal;
		    font-size: 12px;
		    line-height: 20px;
			    color: #333333;
		
	}
</style>